@charset "utf-8";
@include ns(date-picker-input){display: inline-block; position: relative;
  &.date-picker-clear{
    // 输入框有值时鼠标经过隐藏日期icon
    &:hover{
      @include ns(icon-date){display: none}
    }
  }
  @include ns(icon-date){
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; cursor: pointer;
    &:before{content: '\f073';display: inline-block;}
  }
}
@include ns(date-picker){ position: absolute; background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 1px 6px #ddd; z-index: 999; padding: 5px; overflow: hidden; animation: slideDown .3s; transform-origin: center top;box-sizing: border-box;
  .calendar{ float: left; display: block; user-select: none;width: 250px;
    &:nth-child(2){ margin-left: 10px; }
  }
  .calendar-head{height: 34px;line-height: 34px; text-align: center; position: relative;
    a{ cursor: pointer; position: absolute; padding: 0 5px; font-weight: 700; font-size: 12px; }
    .calendar-prev-year{ left: 5px; }
    .calendar-prev-month{ left: 25px; }
    .calendar-year-select, .calendar-year-month{ position: relative; padding: 0; }
    .calendar-next-year{ right: 5px; }
    .calendar-next-month{ right: 25px; }
  }
  .calendar-body{ text-align: center; position: relative;
    .calendar-days{
      a{ float: left; width: 14.28%; height: 25px;line-height: 25px; display: block; font-size: 12px; color: #333; box-sizing: border-box; cursor: pointer; position: relative;
        &:hover{ background: #eaf8fe; }
        span{ position: absolute; font-size: 10px; right: -3px; top: -6px;color: #2d8cf0;z-index: 2 }
      }
      /*非当前月*/
      .calendar-date-out{ color: #999; }
      .calendar-date-disabled{ color: #ccc; cursor: not-allowed !important;
        &:hover{ background: none }
      }
      /*当前选中*/
      .calendar-date-select{ color: #f60; }
      /*今天的*/
      .calendar-date-today{ text-decoration: underline }
    }
    .calendar-week{
      a{ cursor: default;
        &:hover{ background: none; }
      }
    }
    .calendar-months, .calendar-year{background: #fff; overflow: hidden;z-index: 10;
      a{ float: left; width: 33.33%; height: 44px;line-height: 44px; display: block; color: #333; cursor: pointer;
        &:hover{ background: #eaf8fe; }
        &.calendar-date-disabled{ background: #ccc; cursor: not-allowed }
        &.calendar-date-old{ background: #eaf8fe; }
        &.calendar-date-select{ background: #1284e7; color: #fff; font-weight: 700; }
      }
    }
    .calendar-time{height: 22px;line-height: 22px; position: relative; text-align: left;
      .calendar-time-input{ border: 1px solid #d9d9d9; width: 80px;}
      input{ width: 20px; text-align: center; border: 0; font-size: 12px;outline: none }
      .btn-time{ right: 10px; top: 0; position: absolute; cursor: pointer; }
    }
  }
  &.date-picker-range{
    //双日历
    .calendar-year, .calendar-months{ width: 202% !important; z-index: 5 }
    .btn-time{ clear: both; text-align: right; margin-right: 10px; cursor: pointer;
      &:hover{ color: #f60; }
    }
  }
  .clearfix{
    &:after{display: block; content: '.'; clear: both; height: 0; line-height: 0; visibility: hidden;}
  }
}
